<template>
<div class="mainViewContainer">

<!--    登录框-->
    <Login />
<!--    注册框 -->
    <Register />

    <!-- 最上方黑色框 -->
    <div class="top">
        <div class="topContent">
            <!-- top左边内容 -->
            <div class="topLeft">
                <a class="topA">帮助中心</a>
                <a class="topA">收藏</a>
                <a class="topA">360官网</a>
                <a class="topA">360智慧生活</a>
            </div>
            <!-- top右边内容 -->
            <div class="topRight">
                <div v-if="!(userStoreImpl.user.id !== -1)">
                    <a class="topA" @click="loginStoreImpl.visable = true">登录</a>
                    <a class="topA" @click="loginStoreImpl.registerVis = true">注册</a>
                </div>
                <div v-else style="display: flex">
                    <el-dropdown>
                        <span class="topA">当前登录：{{ userStoreImpl.user.nickName }}</span>
                        <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>购物车</el-dropdown-item>
                            <el-dropdown-item @click="signOut">注销</el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                  <div style="position:relative;" @mouseenter="gwcEnterHandler"
                       @mouseleave="gwcLeaveHandler">
                    <img src="../assets/gwc.png"
                         width="40"
                         style="cursor: pointer"/>
                    <ShoppingCart v-if="gwcVis"/>
                   <!-- <ShoppingCart/> -->
<!--                    <div class="gwcDiv" v-show="gwcVis" >-->

<!--                    </div>-->
                  </div>

                </div>
            </div>
        </div>
    </div>

    <!--  搜索菜单栏-->
    <div class="searchMenu">
        <div class="searchMenuContent">
            <a class="logo" href="/">
                <img src="https://p1.qhimg.com/t0102789b8d00c3dfce.png" alt="360logo" style="width:180px;height: 36px;cursor: pointer;"/>
            </a>
            <a class="sA" href="/">新品推荐</a>
            <a class="sA" href="/">热卖榜单</a>
            <div style="float: right;">
                <div class="searchContainer">
                    <input v-model="searchValue"/>
                    <img @click="search" src="../assets/search.png" alt="" style="position: absolute;position: absolute;top: 2px;width: 8%;right: 14px;cursor: pointer;">
                </div>
            </div>
        </div>
    </div>

  <RouterView/>

</div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import Login from "../components/MainView/Login.vue";
import { loginStore } from "../store/loginStore";
import { userStore } from "../store/userStore";
import Register from "../components/MainView/Register.vue";
import {ElMessage} from "element-plus";
import ShoppingCart from "../components/MainView/ShoppingCart.vue";
import router from "../router";

const loginStoreImpl = loginStore();
const userStoreImpl = userStore();

//购物车显示
const gwcVis = ref(false)
const searchValue = ref('')

const gwcEnterHandler = () => {
  gwcVis.value = true;
}

const gwcLeaveHandler = () => {
  gwcVis.value = false;
}

const search = () => {
  const url = `/search?searchValue=${searchValue.value}`;
  if (router.currentRoute.value.path.indexOf('/search') != -1) {
    window.location.href = url;
  } else {
    window.open(url, "_blank");
  }
}

const signOut = () => {
  userStoreImpl.user = {};
  userStoreImpl.user.id = -1;
  window.localStorage.setItem("user" , "");
  ElMessage({
    message: "注销成功",
    type: 'success'
  })
}

onMounted(() => {

})

</script>

<style scoped>
:root{
    --content-width: 1180px;
}
.mainViewContainer{
    width: 100%;
    height: 100%;
}
.top{
    height: 40px;
    background-color: #333;
    display: flex;
    justify-content: center;
}
.topContent{
    width: 1180px;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.topA{
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    line-height: 20px;
    margin-right: 25px;
    padding: 10px 0;
}
.topRight{
    float: right;
}
.searchMenu{
    height: 70px;
    width: 100%;
    padding: 30px 0 36px;
    display: flex;
    justify-content: center;
    padding-bottom: 0;
}
.searchMenuContent{
    width: 1180px;
    height: 100%;
}
.logo{
    display: block;
    float: left;
    height: 100%;
    margin-left: 0;
    margin-right: 50px;
    position: static;
    width: 180px;
}
.logo>i{
    background: url('../assets/360logo.png') no-repeat;
    background-size: contain;
    background-position: center;
    height: 100%;
    width: 100%;
}
.sA{
    color: #333;
    display: block;
    float: left;
    margin-right: 50px;
    margin-top: 8px;
}
.searchContainer{
    position: relative;
    width: 420px;
    height: 36px;
    background: rgba(255,255,255,0.8);
    border: 1px solid #ccc;
    border-radius: 18px;
    box-sizing: border-box;
    height: 100%;
    padding: 5px 30px;
    position: relative;
    text-align: left;
    width: 100%;
    padding-right: 29px;
}
.searchContainer>input{
    background: transparent;
    height: 24px;
    outline: none;
    padding: 0;
    width: 340px;
    border: 0;
    vertical-align: middle;
}
.gwcDiv{
  position: absolute;
  width: 200px;
  min-height: 200px;
  background-color: #ffffff;
  left: -160px;
  right: 0px;
  top: 40px;
  z-index: 999;
  box-shadow: #f5f5f5 -1px 0px 20px 7px;
  border: 1px solid #e3e3e3;
}
el-dropdown:hover{
  border: 0 !important;
}
.el-dropdown:hover{
  border: 0 !important;
}
</style>
